<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<script src="js/config.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
	</head>
	<style>
		body,
		html {
			background-color: white;
		}
		
		.top {
			width: 100%;
			height: 0.8rem;
			background-color: #F7F7F7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.2rem;
			box-sizing: border-box;
		}
		
		.top img {
			width: 0.5rem;
		}
		
		.contain {
			width: 90%;
			margin: 0 auto;
			padding: 0.2rem 0;
			box-sizing: border-box;
		}
		
		.file-box {
			width: 3rem;
			background: url(img_page/a11.png);
			background-size: 100%;
			overflow: hidden;
		}
		.file-box img{
			margin-bottom: 0.2rem;
		}
		
		#input_file {
			width: 100%;
			height: 3rem;
			opacity: 0;
		}
		
		#masonry {
			column-count: 2;
			column-gap: 10px;
		}
		
		.masonry {
			column-count: 1;
			column on mobile;
		}
		
		@media (min-width: 400px) {
			.masonry {
				column-count: 2;
				columns on larger phones;
			}
		}
		
		@media (min-width: 1200px) {
			.masonry {
				column-count: 3;
			}
		}
		
		#masonry .item:first-child {
			padding: 0;
		}
		
		.item {
			break-inside: avoid;
			box-sizing: border-box;
			margin-bottom: 0.2rem;
		}
	</style>

	<body>
		<!--顶部-->
		<div class="top">
			<img onclick="javascript :history.back(-1);" src="img_page/right.png" />
			<span id="my_photo_del">管理</span>
		</div>

		<!--内容区域-->
		<div class="contain">

			<div id="masonry">
				<div class="item">
					<div class="item_content">
						<div class="file-box">
							<input type="file" name="file" id="input_file" onchange="imgPreview(this)">
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			//管理跳转删除页面
			$("#my_photo_del").on("click", function() {
				//console.log(c_user_id)
				window.location.href = "material_photo_manage.html?c_user_id=" + c_user_id
			})

			$.ajax({
				type: "get",
				url: v_url + "/wechat/material/getUserPhoto",
				data: {
					"c_user_id": c_user_id
				},
				async: true,
				success: function(data) {
					console.log(data);
					$.each(data.data, function(i, item) {
						var picList = "<div class='file-box'><img src=" + item.img_url + " /></div>"
						$('#masonry').append(picList);
					});

				}
			});
		})

		function imgPreview(fileDom) {
			//判断是否支持FileReader
			if(window.FileReader) {
				var reader = new FileReader();
			} else {
				alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
			}
			//获取文件
			var file = fileDom.files[0];
			var imageType = /^image\//;
			//是否是图片
			if(!imageType.test(file.type)) {
				alert("请选择图片！");
				return;
			}
			//读取完成
			reader.onload = function(e) {
				//图片路径设置为读取的图片
				var urlTo = e.target.result;
				var newUrl = $("<div class='item'><img src=" + urlTo + " /></div>")
				$('#masonry').append(newUrl);
			};
			reader.readAsDataURL(file);

			var formData = new FormData();
			formData.append('file', $('#input_file')[0].files[0]); //添加图片信息的参数
			formData.append('sizeid', 123); //添加其他参数
			$.ajax({
				url: v_url + "/goods/uploadImg?c_user_id="+c_user_id,
				type: 'POST',
				cache: false, //上传文件不需要缓存
				data: formData,
				processData: false, // 告诉jQuery不要去处理发送的数据
				contentType: false, // 告诉jQuery不要去设置Content-Type请求头
				success: function(data) {
					console.log(data)
				}
			})

		}
	</script>

</html>